<script>
  init({
    title: 'insertRow',
    desc: 'Insert a new row, the param contains following properties:<br>' +
      'index: the row index to insert into.<br>' +
      'row: the row data.<br>' +
      '<code>$table.bootstrapTable(\'insertRow\', {index: 1, row: row})</code>',
    links: ['bootstrap-table.min.css'],
    scripts: ['bootstrap-table.min.js']
  })
</script>

<div id="toolbar">
  <button id="button" class="btn btn-secondary">insertRow</button>
</div>
<table id="table"
      data-toggle="table"
      data-toolbar="#toolbar"
      data-height="428"
      data-url="json/data1.json">
  <thead>
  <tr>
    <th data-field="id">ID</th>
    <th data-field="name">Item Name</th>
    <th data-field="price">Item Price</th>
  </tr>
  </thead>
</table>

<script>
  var $table = $('#table')
  var $button = $('#button')

  function mounted() {
    $button.click(function () {
      var randomId = 100 + ~~(Math.random() * 100)
      $table.bootstrapTable('insertRow', {
        index: 1,
        row: {
          id: randomId,
          name: 'Item ' + randomId,
          price: '$' + randomId
        }
      })
    })
  }
</script>
